<template>
    <el-table :data="state.data" height="900"
    :default-sort="state.sort"
    @sort-change="sortChange"
    :cell-class-name="tableCellClassName"
    style="width: 100%">

        <el-table-column prop="date" label="日期" width="120" sortable/>
        <el-table-column prop="总数" label="总数" width="80" sortable/>
        <el-table-column prop="上证指数" label="上证指数" sortable/>
        <el-table-column prop="上证指数PCT" label="上证指数PCT" sortable/>
        <el-table-column prop="创业板PCT" label="创业板PCT" sortable/>
        <el-table-column prop="沪深300PCT" label="沪深300PCT" sortable/>
        <el-table-column prop="中证全指PCT" label="中证全指PCT" sortable/>
        <el-table-column prop="上涨个数" label="上涨个数" sortable/>
        <el-table-column prop="rate" label="上涨比率" width="100">
            <template #default="scope">
                {{ ( 100 * scope.row["上涨个数"] / scope.row["总数"]).toFixed(2)  + '%' }}
            </template>
        </el-table-column>
        <el-table-column prop="上涨超5%个数" label="上涨超5%个数" sortable/>
        <el-table-column prop="下跌超5%个数" label="下跌超5%个数" sortable/>
        <el-table-column prop="LP_LET_10" label="LP_LET_10" sortable/>
        <el-table-column prop="GT_60D" label="GT_60D" sortable/>
        <el-table-column prop="GT_300D" label="GT_300D" sortable/>

    </el-table>

</template>

<script setup>
// 个股周数据详情页
import * as ss from 'simple-statistics';
import { reactive } from 'vue';
import { getTradingRankSatData } from '../service/tradingRank';
import { useRouteQuery } from '../utils/useRoute';

const baseKey = "tradingRankSat"
const sortPropKey = baseKey + "SortProp"
const sortOrderKey = baseKey + "SortOrder"

const state = reactive({
    data: [],
    year : '2025',
    lastDate: '',
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    }
})

let year = useRouteQuery('year', '2025')
state.year = year

getTradingRankSatData(state.year).then(res => {
    state.data = res.data

    state.data.forEach(item => {
        if (item.date > state.lastDate) {
            state.lastDate = item.date
        }
    })
})

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let columnProperty = column.property
    let val = row[columnProperty]

    if (columnProperty == "rate") {
        let rate = 100 * row["上涨个数"] / row["总数"]
        if ( rate <= 20) {
            return "pctlt0-cell"
        }
        if (rate >= 80) {
            return "lpgt99-cell"
        }
    }

    if (["上证指数PCT","创业板PCT","沪深300PCT","中证全指PCT"].includes(columnProperty)) {
        if (val < 0) {
            return "pctlt0-cell"
        }
    }
    if (columnProperty == "上证指数") {
        if (val >= 3800) {
            return "roe-gt15-cell"
        }
        if (val >= 3700) {
            return "lpgt99-cell"
        }
        if (val >= 3600) {
            return "wugu-lt10-cell"
        }
        if (val <= 3200) {
            return "pctlt0-cell"
        }
    }

    if (row['date'] == state.lastDate) {
        return 'lp-warning-row'
    }

    return ''
}
</script>

<style scope>
.lp-warning-row {
    background: rgb(215, 246, 248);
}
</style>